<!DOCTYPE html>

<%@ page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />


<title>sqpoll</title>

<link rel="shortcut icon" href="/sqpoll/resources/images/ico_sqpoll_logo.png" />
<link rel="apple-touch-icon" href="/sqpoll/resources/images/ico_sqpoll_logo.png" />
<link rel="apple-touch-startup-image" href="/resources/images/ios_splash.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="/sqpoll/resources/rateit/rateit.css" >
<link rel="stylesheet" href="/sqpoll/resources/styles/app.css" />

<style>
/* Custom styles */
</style>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="/sqpoll/resources/scripts/jquery.ui.touch-punch.min.js"></script>
<script src="/sqpoll/resources/rateit/jquery.rateit.min.js"></script>
<script src="/sqpoll/resources/scripts/common.js"></script>
<script src="/sqpoll/resources/scripts/poll.js"></script>

<script type="text/javascript">

	/**
	 * Global variables.
	 */
	var questionSeq = 0;

	/**
	 * Page init event for poll talk room page.
	 */
	$("#pollTalkRoomPage").live("pageinit", function(event, ui) {
		$("#pollTalkRoomFooter").hide("slow");
	});
	
	
	/**
	 * Defines the click event of question definition add button.
	 */	
	$("#btnAddQuestionDefintion").live("click", function(e) {
		questionSeq++;
		var objQuestion = new Object();
		objQuestion.sequence = questionSeq;
		
		var objMsg = new Object();

		objMsg.question = "<spring:message code="msg.question" />";
		objMsg.questionType = "<spring:message code="msg.question.type" />";
		objMsg.singlechoiceTye = "<spring:message code="question.type.singlechoice" />";
		objMsg.multiplechoiceType = "<spring:message code="question.type.multiplechoice" />";
		objMsg.rankType = "<spring:message code="question.type.rank" />";
		objMsg.freetextType = "<spring:message code="question.type.freetext" />";
		objMsg.numberType = "<spring:message code="question.type.number" />";
		objMsg.starsType = "<spring:message code="question.type.5stars" />";
		objMsg.booleanType = "<spring:message code="question.type.boolean" />";
		objMsg.closeDate = "<spring:message code="msg.close.date" />";
		objMsg.addAnswerChoices = "<spring:message code="msg.add.answer.choices" />";
		objMsg.ok = "<spring:message code="msg.ok" />";
		objMsg.inputQuestionTitleHere = "<spring:message code="msg.input.question.title.here" />";
		
		var questionHtml = getQuestionDefinitionHtml(objQuestion, objMsg);
		console.log(questionHtml);
		
		var questionId = "question" + objQuestion.sequence;
		var html = '<div data-role="collapsible" data-theme="e" data-content-theme="c" data-collapsed="false" id="' + questionId + '">';
		html += '	<h3>' + objMsg.question + '</h3>';
		html += questionHtml;
		html += '</div>';
		
		$("#questionList").append(html).trigger("create");
		
		$("#pollTalkRoomFooter").hide("slow");
	});
	
	
	/**
	 * Defines the click event of question definition preview button.
	 */		
	$("#btnPreviewQuestionDefinition").live("click", function(e) {
		var questionId = $(this).parent().parent().parent().parent().attr("id");
		
		//alert("id == " + questionId);
		var objPoll = getPollProfileObject();
		var objQuestionDefinition = getQuestionDefinitionObject(questionId);
		objQuestionDefinition.options.interactiveMode = objPoll.options.interactiveMode;
		
		// check validation
		if(!checkValidationOfQuestionDefinition(objQuestionDefinition)) {
			return;
		}
		
		var objMsg = new Object();
		objMsg.rankGuide = "<spring:message code="msg.rank.guide" />";
		objMsg.yes = "<spring:message code="msg.yes" />";
		objMsg.no = "<spring:message code="msg.no" />";
		objMsg.del = "<spring:message code="msg.del" />";
		objMsg.edit = "<spring:message code="msg.edit" />";
		objMsg.save = "<spring:message code="msg.save" />";
		var questionPreviewHtml = getQuestionPreviewHtml(objQuestionDefinition, objMsg);
		
		var closeDate = formatStringDate(objQuestionDefinition.closeDate, "MM.dd");
		
		var title = "<spring:message code="msg.question" />";
		if (objPoll.options.interactiveMode == "true") {
			title = "<img src='http://192.168.0.11:8080/sqpoll/resources/images/profile_sample.gif' width=28px height=28px />";
		}
		
		$("#" + questionId + " .ui-btn-text:first").html(
			title +
			'<span style="float:right;">' +
			'	<span class="question-header-closingdate"><spring:message code="msg.closing.date" />:' + closeDate + '</span>' +
			'	<span class="question-header-status"><spring:message code="poll.status.create" /></span>' +
			'	<span class="ui-btn-up-c ui-btn-corner-all ui-count-bubble">0</span>' +
			'</span>'
		);
		
		$("#" + questionId).find("#questionDefinition").hide("slow");
		
		$("#" + questionId).find(".ui-collapsible-content").find("#questionPreview").remove();
		$("#" + questionId).find(".ui-collapsible-content").append(questionPreviewHtml).trigger("create");
		
		if (objQuestionDefinition.type == "rank") {
			var sortableId = "#sortable-" + questionId;
			$(sortableId).sortable();
		    $(sortableId).disableSelection();
		    // refresh list to the end of sort to have a correct display.
		    $(sortableId).bind("sortstop", function(event, ui) {
		      $(sortableId).listview("refresh");
		    });
		}
		else if (objQuestionDefinition.type == "5stars") {
			$(function() {
				var backingId = "#backing-" + questionId;
				var rateidId = "#rateit-" + questionId;
				$(rateidId).rateit({ max: 5, step: 0.5, backingfld: backingId , resetable: false, ispreset: true });
			});
		}
		
		$("#pollTalkRoomFooter").show("slow");
	});
	
	function checkValidationOfQuestionDefinition(objQuestion) {
		var type = objQuestion.type;
		
		if (type == "singleChoice" || type == "multipleChoice" || type == "rank") {
			var choiceCnt = objQuestion.answerChoices.length;
			if (isEmpty(objQuestion.question)) {
				if (choiceCnt < 2) {
					$("#popupPollTalkRoomDialog").popup("open");
					$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.input.question.text.choices" /></p>");
					return false;
				}
				else {
					$("#popupPollTalkRoomDialog").popup("open");
					$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.input.question.text" /></p>");
					return false;		
				}
			}
			else {
				if (choiceCnt < 2) {
					$("#popupPollTalkRoomDialog").popup("open");
					$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.input.question.choices" /></p>");
					return false;
				}
			}
		}
		else {
			if (isEmpty(objQuestion.question)) {
				$("#popupPollTalkRoomDialog").popup("open");
				$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.input.question.text" /></p>");
				return false;
			}
		}
		
		return true;
	}
	
	/**
	 * Defines the click event of question definition edit button.
	 */		
	$("#btnEditQuestionDefinition").live("click", function(e) {
		var questionId = $(this).parent().parent().parent().parent().attr("id");
		
		$("#" + questionId).find("#questionPreview").hide("slow");
		$("#" + questionId).find("#questionDefinition").show("slow");
		
		$("#pollTalkRoomFooter").hide("slow");
	});
	
	/**
	 * Defines the click event of question definition delete button.
	 */		
	$("#btnDelQuestionDefinition").live("click", function(e) {
		var questionId = $(this).parent().parent().parent().parent().attr("id");
		
		$("#" + questionId).remove();
	});
	
	/**
	 * Defines the click event of save poll button.
	 */		
	$("#btnSavePoll").live("click", function(e) {
		var objPoll = getPollProfileObject();
		var objQuestions = getQuestionDefinitionObjects();
		
		objPoll.questions = objQuestions;
		
		var commandMode = "";
		if (isEmpty(objPoll.surveyId)) {
			commandMode = "insert";
			objPoll.surveyId = -1;
		}
		else {
			commandMode = "update";
		}
		
		console.log(JSON.stringify(objPoll));

		$.post("pollCreateform", { command: commandMode, json: JSON.stringify(objPoll) },
			function(data) {
				$("#popupPollTalkRoomDialog").popup("open");
				$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.info.save.success" /></p>");
				console.log(data);
				
				var surveyId = $(data).find("#pollProfileform").find("#surveyId").val();
				alert("survey id == " + surveyId);
				$("#pollProfileform").find("#surveyId").val(surveyId);
			})
			.fail(function() { 
				$("#popupPollTalkRoomDialog").popup("open");
				$("#popupPollTalkRoomDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.save.fail" /></p>");
			});
	});
	
	/**
	 * Defines the click event of send poll button.
	 */		
	$("#btnSendPoll").live("click", function(e) {

	});


	/**
	 * Gets the poll profile object from the poll form.
	 */
	function getPollProfileObject() {
		var pollform = $("#pollProfileform");
		var surveyId = pollform.find("#surveyId").val();
		var title = pollform.find("#title").val();
		var instruction = pollform.find("#instruction").val();
		
		//var type = pollform.find("#pollType").val();
		var	type = pollform.find("input[name*=pollType]:checked").val();
		
		var interactiveMode = pollform.find("#pollInteractiveMode").val();
		
		//var participantUserLevel = pollform.find("#participantUserLevel").val();
		var	participantUserLevel = pollform.find("input[name*=participantUserLevel]:checked").val();
		
		//var participantIdentificaton = pollform.find("#participantIdentificaton").val();
		var	participantIdentificaton = pollform.find("input[name*=participantIdentificaton]:checked").val();
		
		var closeDate = pollform.find("#surveyCloseDate").val();

		var objPoll = new Object();
		var objOptions = new Object();
		
		objPoll.surveyId = surveyId;
		objPoll.title = title;
		objPoll.instruction = instruction;
		objPoll.type = type;
		objPoll.closeDate = closeDate;
		objOptions.interactiveMode = interactiveMode;
		objOptions.participantUserLevel = participantUserLevel;
		objOptions.participantIdentificaton = participantIdentificaton;
		objPoll.options = objOptions;

		return objPoll;
	}
	
	/**
	 * Gets the question definition objects from the question list div.
	 */
	function getQuestionDefinitionObjects() {
		var questionList = $("#questionList").children();

		var objQuestions = new Array();
		for ( var i = 0; i < questionList.length; i++) {
			var questionId = $(questionList.get(i)).attr("id");
			
			var objQuestion = getQuestionDefinitionObject(questionId);
			objQuestions.push(objQuestion);
			
			console.log("question == " + objQuestion.question); 
			console.log("type == " + objQuestion.type); 
			console.log("answer choices count == " + objQuestion.answerChoices.length); 
		}
	}
	

	/**
	 * Changes the poll talk room page.
	 */
	function changePollTalkRoomPage() {
		var poll = getPollProfileObject();
		
		// check validation
		if (isEmpty(poll.title)) {
			$("#popupPollProfileformDialog").popup("open");
			$("#popupPollProfileformDialog").find("#popupDialogMessage").html("<p><spring:message code="msg.alert.input.poll.title" /></p>");
			return;
		}
		else {
			$.mobile.changePage("#pollTalkRoomPage", {
				transition: "slide"
			});			
		}
	}
	
</script>
</head>

<body>

	<div data-role="page" id="pollProfileformPage">
		<div data-role="header" data-position="fixed">
			<h1> <spring:message code="msg.poll.profile" /> </h1>
			<a href="#" data-icon="arrow-l" data-rel="back"><spring:message code="msg.back" /></a>
			<a href="javascript:changePollTalkRoomPage();" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right" data-transition="slide"><spring:message code="msg.next" /></a>
		</div>

		<!-- popup dialog -->
		<div data-role="popup" id="popupPollProfileformDialog" class="ui-content" data-theme="e" style="max-width:400px;">
			<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
			<div id="popupDialogMessage"></div>
		</div>

		<div data-role="content" id="pollProfileformContent">		
			<form id="pollProfileform" method="post" action="#">
				<div data-role="fieldcontain" class="ui-screen-hidden">
					<label for="surveyId">ID:</label>
					<input id="surveyId" type="number" name="surveyId" value="<c:out value="${surveyId}"/>"  />
				</div>
			
				<div data-role="fieldcontain">
					<label for="title"><spring:message code="msg.poll.title" />:</label>
					<input id="title" type="text" name="title" data-theme="e" maxlength="200" placeholder="<spring:message code="msg.input.poll.title.here" />" required  />
				</div>
				
				<div data-role="fieldcontain" class="ui-screen-hidden">
					<label for="instruction"><spring:message code="msg.instruction" />:</label>
					<textarea id="instruction" name="instruction" data-theme="e" ></textarea>
				</div>
				
				<div data-role="fieldcontain">
					<!--
					<label for="pollType"><spring:message code="msg.poll.type" />:</label>
					<select id="pollType" name="pollType" data-theme="e">
						<option value="groupPoll"><spring:message code="poll.type.group" /></option>
						<option value="openPoll"><spring:message code="poll.type.open" /></option>
					</select>
					-->
					<fieldset data-role="controlgroup" data-type="horizontal" >
	    			<legend><spring:message code="msg.poll.type" />:</legend>
		         	<input type="radio" name="pollType" id="radio-choice-groupPoll" value="groupPoll" checked="checked" />
		         	<label for="radio-choice-groupPoll"><spring:message code="poll.type.group" /></label>
		
		         	<input type="radio" name="pollType" id="radio-choice-openPoll" value="openPoll" />
		         	<label for="radio-choice-openPoll"><spring:message code="poll.type.open" /></label>
    			</fieldset>
				</div>
				
				<div data-role="fieldcontain">
					<label for="pollInteractiveMode"><spring:message code="msg.interactive.mode" />:</label>
					<select id="pollInteractiveMode" name="pollInteractiveMode" data-role="slider" >
						<option value="false">No</option>
						<option value="true" selected>Yes</option>
					</select>
				</div>
				
				<div data-role="fieldcontain">
					<!--
					<label for="participantUserLevel"><spring:message code="msg.participant.user.level" />:</label>
						<select id="participantUserLevel" name="participantUserLevel" data-theme="e" >
							<option value="anyone" selected><spring:message code="participant.user.level.anyone" /></option>
							<option value="memberonly"><spring:message code="participant.user.level.memberonly" /></option>			
						</select>
					-->
					<fieldset data-role="controlgroup" >
	    			<legend><spring:message code="msg.participant.user.level" />:</legend>
		         	<input type="radio" name="participantUserLevel" id="radio-choice-anyone" value="anyone" checked="checked" />
		         	<label for="radio-choice-anyone"><spring:message code="participant.user.level.anyone" /></label>
		
		         	<input type="radio" name="participantUserLevel" id="radio-choice-memberonly" value="memberonly" />
		         	<label for="radio-choice-memberonly"><spring:message code="participant.user.level.memberonly" /></label>
    			</fieldset>					
				</div>
				
				<div data-role="fieldcontain">
					<!--  
					<label for="participantIdentificaton"><spring:message code="msg.participant.identification" />:</label>
						<select id="participantIdentificaton" name="participantIdentificaton" data-theme="e" >
							<option value="realname" selected><spring:message code="participant.identification.realname" /></option>
							<option value="anonymous"><spring:message code="participant.identification.anonymous" /></option>			
						</select>
					-->
					<fieldset data-role="controlgroup" data-type="horizontal" >
	    			<legend><spring:message code="msg.participant.identification" />:</legend>
		         	<input type="radio" name="participantIdentificaton" id="radio-choice-realname" value="realname" checked="checked" />
		         	<label for="radio-choice-realname"><spring:message code="participant.identification.realname" /></label>
		
		         	<input type="radio" name="participantIdentificaton" id="radio-choice-anonymous" value="anonymous" />
		         	<label for="radio-choice-anonymous"><spring:message code="participant.identification.anonymous" /></label>
    			</fieldset>
				</div>
				
				<div data-role="fieldcontain" class="ui-screen-hidden">
					<label for="surveyCloseDate"><spring:message code="msg.close.date" />:</label>
					<input id="surveyCloseDate" type="date" name="surveyCloseDate" step="1" value=""  />
				</div>

			</form>
		</div>
	</div>
	
	<div data-role="page" id="pollTalkRoomPage">
		<div data-role="header" data-position="fixed">
			<h1> <spring:message code="msg.poll.talk.room" /> </h1>
			<a href="#" data-icon="arrow-l" data-rel="back"><spring:message code="msg.back" /></a>
			<a href="#" data-icon="plus" data-iconpos="right" class="ui-btn-right" data-transition="slide" id="btnAddQuestionDefintion"><spring:message code="msg.add.question" /></a>
		</div>
		
		<!-- popup dialog -->
		<div data-role="popup" id="popupPollTalkRoomDialog" class="ui-content" data-theme="e" style="max-width:400px;">
			<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
			<div id="popupDialogMessage"></div>
		</div>
		
		<div data-role="content" id="pollTalkRoomContent">
			<div id="questionList">
			</div>
		</div>
		
		<div data-role="footer" class="ui-bar" data-theme="c" data-position="fixed" style="text-align:center;" id="pollTalkRoomFooter">
			<a href="#" data-role="button" data-icon="check" id="btnSavePoll"><spring:message code="msg.save" /></a>
			<a href="#" data-role="button" data-icon="arrow-r" id="btnSendPoll"><spring:message code="msg.poll.send" /></a>
		</div>

	</div>
</body>
</html>